.phone {
  position            : absolute;
  left                : calc(50% - 400px);
  top                 : 50%;
  transform           : translate(-50%, -50%) scale(0.8);
  animation           : anime-phone 1.75s ease both, appear 0.5s ease;
  animation-play-state: paused, running;
  z-index             : 10;
}

.phone-body {
  width    : 440px;
  transform: translate(-10px);
}

.phone-inner {
  position        : absolute;
  z-index         : 10;
  border          : 1px solid #eee;
  transform       : translate(25px, 92px);
  background-color: #fff;
}

@keyframes anime-phone {
  0% {
    left: calc(50% - 400px);
  }

  50% {
    left: 50%;
  }

  100% {
    left     : 50%;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.cover.anime-5>* {
  animation           : appear 0.75s 1s ease both, anime-5 0.5s ease 1s both;
  animation-play-state: paused, paused;
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes anime-5 {
  from {
    margin: 0;
  }

  to {
    margin: 0 300px;
  }
}